<!DOCTYPE HTML>
<html>
<head>
<!--    <meta charset="utf-8">-->
    <meta http-equiv="Access-Control-Allow-Origin" content="*" charset="utf-8"/>
<!--    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">-->
    <title>四偶极子</title>
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />

    <script type="text/javascript" src="js/jquery1.8.3.min.js"></script>
    <script type="text/javascript" src="js/parabola.js"></script>
    <script type="text/javascript" src="js/panel.js"></script>
    <script type="text/javascript" src="layui/layui.js" charset="utf-8"></script>


</head>
<style>
    /* 2m - 16m*/
    #panel{
         position: absolute;bottom: 14.7%;left: 100px;
         width: 100px;
         height: 200px;
         background: cornflowerblue;
     }
    #panel1{
        position: absolute;top: 508px;left: 925px;
        width:22px;
        height:22px;
        border:2px solid #000;
        border-radius:50%;
    }
    #box{
        position: absolute;bottom:50%;left:100px;
        width: 200px;
        height: 50px;
        border: solid 2px black;
        background-color: transparent;
        text-align: center;
    }
    .fa{
        margin-left: 20px;
    }
    .target2 {
        animation: myfirst 1s infinite;
    }
    @keyframes myfirst {
        0% {
            transform: translate(0px, 0px);
        }
        50% {
            transform: translate(0px, -10px);
        }
        100% {
            transform: translate(0px, 0px);
        }
    }
    #content{
        position: absolute;
        top:5%;
    }

</style>
<body background="imgs/background.png"
      style=" background-repeat:no-repeat ;
    background-size:100% 100%;
    background-attachment: fixed;" >
<div id="content">
    <h3>实验说明《竞赛模式》：</h3>
    <p>1、在竞赛模式中，您有六次机会，当小球打中靶心，即为挑战成功。</p>
    <p>3、此页面结束后，请您进入《轨迹线关系研究》写下您在本次实验中得出的实验结论。</p>
    <p>4、请不要返回上一页面，若返回，则无成绩记录。</p>
    <p>注：如果遇到页面中按钮点击不了的情况，请更换浏览器重新打开页面。（推荐chrome浏览器）</p>
</div>
<div id="container">
<!--    <div id="img">-->
    <div style=" float:left;position:absolute;margin:15px 15px ">
    <a id="reset" href="#">
        <i class="fa fa-eraser  fa-lg"></i> 刻度尺</a>
    <a id="setOptions"  href="#"  onclick="xing()">
        <i class="fa fa-rocket fa-lg"></i> 发射</a>
    <a id="stop"  href="#">
        <i class="fa fa-pause fa-lg"></i> 暂停</a>
        <a id="chart"  >
            <i class="fa fa-area-chart fa-lg"></i> 轨迹线关系研究</a>
<!--        <a id="star" >-->
<!--            <i class="fa fa-star fa-lg"></i> 普通模式</a>-->
    </div>
    <div id="panel1"></div>
    <h2 style="font-size:28px; width:550px;position: relative;top:2%;left:35%;font-family:'微软雅黑';">您有六次发射机会，击中靶心则挑战成功！</h2>
    <h3 id="failure" style="font-size:25px;font-family:'微软雅黑';position: relative;top:50px;left:47%;display: none;" >挑战失败!请点击《轨迹线关系研究》，填写实验结论</h3>
    <h3 id="success" style="font-size:25px;font-family:'微软雅黑';position: relative;top:80px;left:47%;display: none" >挑战成功！请点击《轨迹线关系研究》，填写实验结论</h3>
<!--    <img src="imgs/ganzi.png" style="width:120px;height:112px;position: absolute;bottom:14%;left: 57%">-->
<!--    <img src="imgs/target.png" style="position: relative;bottom: 9px;left: 55%" />-->
<!--    <p id="pp" style="font-size:25px;font-family:'微软雅黑';height: 150px;width:120px;position: absolute;top: 300px;left: 50%;display: none">恭喜你打中靶心!</p>-->
    <img id="img1"src="imgs/xing.png" style="position: absolute;left: 35%;top:6%">
    <img id="img2"src="imgs/xing.png" style="position: absolute;left: 40%;top:6%">
    <img id="img3"src="imgs/xing.png" style="position: absolute;left: 45%;top:6%">
    <img id="img4"src="imgs/xing.png" style="position: absolute;left: 50%;top:6%">
    <img id="img5"src="imgs/xing.png" style="position: absolute;left: 55%;top:6%">
    <img id="img6"src="imgs/xing.png" style="position: absolute;left: 60%;top:6%">
    <img id="sahua" src="imgs/sahua.png"style="position: absolute;top:26%;left:47%;display: none" width="200px" height="200px">
    <img id="jiayou" src="imgs/jiayou.png"style="position: absolute;top:26%;left:47%;display: none" width="200px" height="200px">
        <!-- 右上角的滑块 -->
    <div id="slider-container">
            <form class="layui-form">
                <div class="layui-form-item">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend style="color: #0C0C0C;font-size:15px;padding: 3px 20px" class="layui-bg-green">高度 /m</legend>
                    </fieldset>
                    <div class="demo-slider" id="slideTest8_1"></div>

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend style="color: #0C0C0C;font-size:15px;padding: 3px 10px" class="layui-bg-green">初速度 m/s</legend>
                    </fieldset>
                    <div class="demo-slider" id="slideTest8_2"></div>

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend style="color: #0C0C0C;font-size:15px;padding: 3px 13px" class="layui-bg-green">发射角度 °</legend>
                    </fieldset>
                    <div class="demo-slider" id="slideTest8_3"></div>

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend style="color: #0C0C0C;font-size:15px;padding: 3px 13px" class="layui-bg-green">抛体质量 kg</legend>
                    </fieldset>
                    <div class="demo-slider" id="slideTest8_4"></div>
                </div>
<!--                <div class="layui-form-item" style="margin-top: 40px">-->
<!--                    <select name="city" lay-verify="" >-->
<!--                        <option value="">抛体质量：1kg</option>-->
<!--                        <option value="010">抛体质量：2kg</option>-->
<!--                        <option value="021">抛体质量：3kg</option>-->
<!--                        <option value="0571">抛体质量：4kg</option>-->
<!--                    </select>-->
<!--                </div>-->


            </form>
        </div>
    <div id="panel"></div>

    <img src="imgs/55.png" style="width: 200px;height: 290px;position: absolute;
        bottom:14%;
        left: 55%;"/>
     <!-- 发射位置 -->
    <div id="boll" class="boll" style=" width: 30px;
            height: 30px;
            /*background-color: #ff3333;*/
            position: absolute;

            /*top: 584px;*/
            left: 169px;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;">
        <img src="imgs/ball.png" style="width: 35px;height: 35px">
   </div>
    <!--  实际的落地点 -->
     <div id="target" class="target" style="
            width: 50px;
            height: 50px;
          /*background-color: #00ff00;*/
            position: absolute;
        /*   top: 600px;                  !*下面的boll范围，top-80   left-100 获得 *!*/
            top:81.5%;
            left: 1200px;
             -moz-border-radius: 50px;
             -webkit-border-radius: 50px;
            border-radius: 50px;"></div>
        <div>
            <p id="juli" style="font-size:15px;color:white;float:left;position:absolute;left: 195px;top:88%;" value=""></p>
        </div>
    <div id="ruler" style="display: none">
        <p style="font-size:15px;color:black;float:left;position:absolute;left: 190px;top:83%;" value="">0</p>
        <p style="font-size:15px;color:black;float:left;position:absolute;left: 290px;top:83%;" value="">10</p>
        <p style="font-size:15px;color:black;float:left;position:absolute;left: 390px;top:83%;" value="">20</p>
        <p style="font-size:15px;color:black;float:left;position:absolute;left: 490px;top:83%;" value="">30</p>
        <p style="font-size:15px;color:black;float:left;position:absolute;left: 590px;top:83%;" value="">40</p>
        <p style="font-size:15px;color:black;float:left;position:absolute;left: 690px;top:83%;" value="">50</p>
        <p style="font-size:15px;color:black;float:left;position:absolute;left: 790px;top:83%;" value="">60</p>
        <p style="font-size:15px;color:black;float:left;position:absolute;left: 890px;top:83%;" value="">70</p>
        <p style="font-size:15px;color:black;float:left;position:absolute;left: 990px;top:83%;" value="">80</p>
        <p style="font-size:15px;color:black;float:left;position:absolute;left: 1090px;top:83%;" value="">90</p>
        <p style="font-size:15px;color:black;float:left;position:absolute;left: 1000px;top:60%;" value="">靶心到底部的距离为19</p>

    </div>
        <div>
            <p id="xinxi" style="background-color:azure;border-radius:5px;padding: 10px 10px;
    font-size:14px;color:dimgray;float:left;position:absolute;left: 133px;top:67%;opacity: 0%" value=""></p>
        </div>
<!--    </div>-->

</div>


<script type="text/javascript">

    var cishu=0;
    var i=0;

    document.addEventListener('click', MouseMove)

    function MouseMove(e){
        var offset=$('body').offset();
        var top=e.pageY-offset.top+"px";
        var left=e.pageX-offset.left+"px";
        // console.log(top);
        // console.log(left);
        var winWidth1 = document.body.clientWidth || document.documentElement.clientWidth;//获取浏览器屏幕宽度
        var winHeight1 = document.body.clientHeight || document.documentElement.clientHeight;//获取浏览器屏幕高度
        // console.log(winWidth1);
        // console.log(winHeight1);
    }
  var width=document.body.clientWidth,height=document.body.clientHeight;
    document.getElementById("boll").style.top=(height*0.85-30-200)+"px";
    $(window).resize(function() {
        width = $(this).width();
        height = $(this).height();
        bool.elOriginalTop=(height*0.85-30-h*10)+"px";
        document.getElementById("boll").style.top=(height*0.85-30-h*10)+"px";
    });
    var v0=20,firstAngle=0,h=20;mm=1;
    var tryArray=new Array();   // 存取每次运动的数据
     var fashe=false;
    // 滑块拉完后的变化
    $(function(){
        $(document).on('mouseup',(function(){
            $(document).off('mousemove')
            if(shuzu1.length==0){
                h=20;
            }
            else{
                h=shuzu1[shuzu1.length-1];

            }
            if(shuzu2.length==0){
                v0=20;
            }
            else{
                v0=shuzu2[shuzu2.length-1];
            }
            if(shuzu3.length==0){
                firstAngle=5;
            }
            else{
                firstAngle=shuzu3[shuzu3.length-1];
            }
            if(shuzu4.length==0){
                mm=1;
            }
            else{
                mm=shuzu4[shuzu4.length-1];
            }
            document.getElementById('panel').style.height = h*10 +'px';
            // 发射高度
            if(document.getElementById("boll").style.left=="133px"){
                document.getElementById("boll").style.top=(height*0.85-30-h*10)+"px";
            }

        }));
    });
        var shuzu1=new Array();
        var shuzu2=new Array();
        var shuzu3=new Array();
        var shuzu4=new Array();

    layui.use('slider', function(){
        var $ = layui.$
            ,slider = layui.slider;
        //高度
        slider.render({
            elem: '#slideTest8_1'
            ,input: true
            ,min:0
            ,max:50
            ,value:20
            ,change: function(value){
                shuzu1.push(value);
                // console.log(shuzu1);
            }
        });
        //初速度
        slider.render({
            elem: '#slideTest8_2'
            ,input: true //输入框
            ,min:0
            ,max:50
            ,value:20
            ,change: function(value){
                shuzu2.push(value);

            }

        });
        //发射角度
        slider.render({
            elem: '#slideTest8_3'
            ,input: true //输入框
            ,min:0
            ,max:90
            ,value:5
            ,change: function(value){
                shuzu3.push(value);
            }
        });
        // 质量选择
        // layui.use('form',function () {
        //     var form=layui.form;
        //     form.on('select',function (value) {
        //         shuzu4.push(value);
        //     })
        //
        // });
        //初速度
        slider.render({
            elem: '#slideTest8_4'
            ,input: true //输入框
            ,min:1
            ,max:4
            ,value:1
            ,change: function(value){
                shuzu4.push(value);
                console.log(value+"质量")
                if(value==2){
                    slider.render({
                        elem: '#slideTest8_2'
                        ,input: true //输入框
                        ,min:0
                        ,max:40
                        ,value:20
                        ,change: function(value){
                            shuzu2.push(value);
                        }
                    });
                };
                if(value==3){
                    slider.render({
                        elem: '#slideTest8_2'
                        ,input: true //输入框
                        ,min:0
                        ,max:30
                        ,value:15
                        ,change: function(value){
                            shuzu2.push(value);
                        }
                    });
                };
                if(value==4){
                    slider.render({
                        elem: '#slideTest8_2'
                        ,input: true //输入框
                        ,min:0
                        ,max:20
                        ,value:10
                        ,change: function(value){
                            shuzu2.push(value);
                        }
                    });
                }
            }
        });






    });

    var g=9.8;

    // 斜抛公式在这
    function tijiao(){
        console.log("初始高度:"+h+"  初角度:"+firstAngle +"   初速度："+v0);

        // 只要根据角度和v0算出x，后面的轨迹自动生成
        var m=firstAngle*Math.PI/180;
        var mm=v0*Math.sin(m);
        var x;
        x=v0/g*Math.cos(m)*(v0*Math.sin(m)+Math.sqrt(mm*mm+2*g*h))*10;
        // console.log("水平位移："+x/10);
        document.getElementById("target").style.left=(169+x)+"px";
        bool.elOriginalTop=(height*0.85-30-h*10)+"px";
        tryArray.push((x/10).toFixed(2));
        document.getElementById("juli").innerHTML=(x/10).toFixed(2);
        document.getElementById("juli").style.left=(195+x)+"px";
        shecheng=(x/10).toFixed(2);
    }
    // 轨迹线的number
    var number=-1;
    function showData(event){
        var nn=event.target.className;
        for( var i=0;i<20;i++){
            if(nn=="guiji"+i)
            {
                document.getElementById("xinxi").innerHTML="高度: "+tryArray[4*i+1] +" m<br>"+"初速度: "+tryArray[4*i+2]+" m/s<br>"+"发射角度: "+tryArray[4*i+3]+" °<br>"+"水平距离: "+tryArray[4*i]+" m";
                $("#xinxi").css({
                    "left":event.screenX,
                    "top":event.screenY-45,
                    "z-index":9999,
                    "opacity":1,
                })
            }
        }


    }
    function notData(){
        document.getElementById("xinxi").innerHTML="";
        document.getElementById("xinxi").style.opacity=0;
    }

    // $("#reset").click(function (event) {
    //     event.preventDefault();
    //     bool.reset();
    //     // 每次发射出去后，就清空缓存的数组
    //     shuzu1.splice(0,shuzu1.length);
    //     shuzu2.splice(0,shuzu2.length);
    //     shuzu3.splice(0,shuzu3.length);
    //     shuzu4.splice(0,shuzu4.length);
    //
    //     var $ = layui.$
    //         , slider = layui.slider;
    //
    //     slider.render({
    //         elem: '#slideTest8_2'
    //         ,input: true
    //         ,min:0
    //         ,max:50
    //         ,value:0
    //     });
    //     slider.render({
    //         elem: '#slideTest8_3'
    //         ,input: true
    //         ,min:0
    //         ,max:90
    //         ,value:0
    //     });
    // });
    $("#reset").click(function (event) {
        if(document.getElementById("ruler").style.display=="none"){
            document.getElementById("ruler").style.display="inline";
        }else{
            document.getElementById("ruler").style.display="none";
        }

    });
    $("#stop").click(function (event) {
        event.preventDefault();
        bool.stop();
    });

    var a,b,c;
    var winWidth = document.body.clientWidth || document.documentElement.clientWidth;
    var winHeight = document.body.clientHeight || document.documentElement.clientHeight;
    $(window).resize(function(){
        winWidth=$(this).width();
        winHeight=$(this).height();
    });
    aaa=winHeight-winHeight*0.14-212;//距离顶点
    bbb=winWidth-winWidth*0.45+84;//距离左边的
    document.getElementById("panel1").style.left=bbb+"px";
    document.getElementById("panel1").style.top=aaa+"px";
    // console.log(aa);
    // console.log(bb);

    var bool = new Parabola({
        el: "#boll",
        curvature: 0.001,  // 斜抛出去的角度
        duration: 20000,  // 打点的密度
        stepCallback:function(x,y){
            //TODO:
            $("<div id='hh' class=\"guiji" + number + "\"  onmouseover='showData(event)'  onmouseleave='notData()'>").appendTo("body").css({
                "position": "absolute",
                "top": this.elOriginalTop + y,
                "left":this.elOriginalLeft + x,
                "background-color":"#CDCDCD",
                "width":"5px",
                "height":"5px",
                "border-radius": "5px",
                "id":""
            });
            a=parseInt(this.elOriginalTop + y);
            b=parseInt(this.elOriginalLeft + x);
            aa=winHeight-winHeight*0.14-212;//距离顶点
            bb=winWidth-winWidth*0.45+84;//距离左边的
            c=Math.sqrt((a-aa)*(a-aa)+(b-bb)*(b-bb));
            //判断是否打中
            if(c<15){
                ss=1;
                document.getElementById("success").style.display="inline";
                document.getElementById('setOptions').style.pointerEvents="none"//按钮无法点击
                document.getElementById("sahua").style.display="inline"
                bool.stop();
                document.getElementById("boll").style.display="none";
            }

        }
    });
//接收用户信息
    var jsonData2 = JSON.parse(window.name); //将window.name转化为json对象
    console.log(jsonData2.userid2,jsonData2.username2);
    var user_id=jsonData2.userid2;
    var user_name=jsonData2.username2;
    var ss=0;
    function xing(){
        i++;
        switch (i) {
            case 1:document.getElementById('img1').style.display="none";
                break;
            case 2:document.getElementById('img2').style.display="none";
                break;
            case 3:document.getElementById('img3').style.display="none";
                break;
            case 4:document.getElementById('img4').style.display="none";
                break;
            case 5:document.getElementById('img5').style.display="none";
                break;
            case 6:document.getElementById('img6').style.display="none";
                break;
            default:
        }
        //点击次数小于7次 ，可以进行发射
       if(i<7) {
           console.log(ss+"ll");
           cishu++;
           fashe=true;
           tijiao();
           document.getElementById("boll").style.top=(height*0.85-30-h*10)+"px";
           event.preventDefault();
           bool.setOptions({
               targetEl: $("#target"),
               curvature: 0.001,
               duration: 1000
           });
           bool.start();
           number++;
           if(fashe){
               if(isNaN(shuzu1[shuzu1.length-1])){
                   shuzu1[shuzu1.length-1]=20;
               }
               if(isNaN(shuzu2[shuzu2.length-1])){
                   shuzu2[shuzu2.length-1]=20;
               }
               if(isNaN(shuzu3[shuzu3.length-1])){
                   shuzu3[shuzu3.length-1]=0;
               }
               if(isNaN(shuzu4[shuzu4.length-1])){
                   shuzu4[shuzu4.length-1]=1;
               }
               tryArray.push(shuzu1[shuzu1.length-1],shuzu2[shuzu2.length-1],shuzu3[shuzu3.length-1],shuzu4[shuzu4.length-1]); // 3i高度，3i+1初速度，3i+2发射角度
               console.log(tryArray);
               fashe=false;
           }
           $.ajax({
               url:'http://121.4.82.48:8081/game',
               type:'GET',
               data:{
                   'height1':shuzu1[shuzu1.length-1],
                   'speed1':shuzu2[shuzu2.length-1],
                   'angle1':shuzu3[shuzu3.length-1],
                   'weight1':shuzu4[shuzu4.length-1],
                   'distance1':shecheng,
                   'user_id':user_id,

               },
               success() {
                   console.log(shuzu1[shuzu1.length-1],shuzu2[shuzu2.length-1],shuzu3[shuzu3.length-1],shuzu4[shuzu4.length-1],
                       user_id+"成功")
               },
               error(){
                   console.log(shecheng+'失败')
               }
           })

       }
       if(i>=7){
       document.getElementById("failure").style.display="inline";
       document.getElementById("jiayou").style.display="inline"
           document.getElementById('setOptions').style.pointerEvents="none"
       }

    }
    $(function(){
        $("#chart").click(function (event) {
        //点击轨迹实验打包用户信息
        var userid3 = user_id;//获取填写的id
        var username3 = user_name;//获取填写的name
        var jsonData3 = {"userid3":userid3,"username3":username3}; //转化为json格式
        window.name = JSON.stringify(jsonData3); //window.name只接受字符串格式，所以需要把json转换一下
        $.ajax({
            url:'http://121.4.82.48:8081/login',
            type:'POST',
            data:{
                "userId":user_id,
                "userName":user_name,
                'success':ss,
                'chance':i
            },
            success() {
                console.log(user_id+user_name+ss+"登录信息");
            },
            error(){
                console.log('error')
            }
        })
            window.location="zuobiaoxi2.html";
    })})


    //精确打击时候的轨迹
    // $("#setOptions").click(function (event) {
        //     tijiao();
        //     document.getElementById("boll").style.top = (height * 0.85 - 30 - h * 10) + "px";
        //     event.preventDefault();
        //     bool.setOptions({
        //         targetEl: $("#target"),
        //         curvature: 0.001,
        //         duration: 1000
        //     });
        //     bool.start();
        //     number++;
        //     if (fashe) {
        //         tryArray.push(shuzu1[shuzu1.length - 1], shuzu2[shuzu2.length - 1], shuzu3[shuzu3.length - 1]); // 3i高度，3i+1初速度，3i+2发射角度
        //         console.log(tryArray);
        //         fashe = false;
        //     }
        //     // console.log(bool.id);
        //
        // });

</script>
</body>
</html>